<template>
	<el-row class="top">
		<el-col class="center">
			<!-- 文本 -->
			<el-dropdown class="plugins-nav" trigger="click" @command="onAddTextInput" :hide-on-click="true" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-text"></i>文本<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="plugins-nav-list">
            <el-dropdown-item class="plugins-nav-item" v-for="(item, index) in fontSizes" :key="index" :command="index">{{item.text}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 媒体 -->
			<el-dropdown class="plugins-nav" trigger="click" placement="top" :hide-on-click="true">
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-media"></i>媒体<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="plugins-media-list">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 5px;" @change="onChangeMedia">
              <el-radio-button :label="MEDIAS.image.type">图片</el-radio-button>
              <el-radio-button :label="MEDIAS.audio.type">音频</el-radio-button>
              <el-radio-button :label="MEDIAS.video.type">视频</el-radio-button>
            </el-radio-group>
            <!-- <li v-for="item in MEDIAS" :key="item.type" v-show="tabPosition == item.type"> -->
              <media-layout :item="mediaItem" :isPop="false"></media-layout>
            <!-- </li> -->
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 表单 -->
			<el-dropdown class="plugins-nav" trigger="click" @command="onAddComponent" placement="top" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-form"></i>表单<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 500px;">
            <li class="comp-list-box" v-for="(item, index) in pluginsFormLists" :key="index">
              <el-row class="comps-list">
                <el-dropdown-item
                  v-for="(btnItem, btnIndex) in item.lists"
                  :key="btnIndex"
                  :command="btnItem">
                  <el-button
                    type="text"
                    :disabled="btnItem.bIsDisabled">
										<el-icon><i :class="btnItem.icon"></i></el-icon>
                    {{btnItem.text}}
                  </el-button>
                </el-dropdown-item>
              </el-row>
            </li>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 插件 -->
			<el-dropdown class="plugins-nav" trigger="click" @command="onAddWBComponent" placement="top" :hide-on-click="true" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-plugin"></i>插件<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 610px;">
            <li class="comp-list-box" v-for="(item, index) in pluginsCompLists" :key="index">
              <span class="comp-title" v-html="item.title"></span>
              <el-row class="comps-list">
                <el-dropdown-item
                  v-for="(btnItem, btnIndex) in item.lists"
                  :key="btnIndex"
                  :disabled="btnItem.bIsDisabled"
                  :command="btnItem.cid">
                  <el-button
                    type="text"
                    :disabled="btnItem.bIsDisabled">
										<el-icon><i :class="btnItem.icon"></i></el-icon>
                    {{btnItem.text}}
                  </el-button>
                </el-dropdown-item>
              </el-row>
            </li>
          </el-dropdown-menu>
        </template>
			</el-dropdown>

			<!-- 矢量组件 -->
			<el-dropdown v-if="groupComponentLists.length > 0" class="plugins-nav" trigger="click" @command="onAddGroupComponent" placement="top" v-once>
				<el-button class="plugins-nav-btn" type="text">
					<i class="jy-icon-plugin"></i>矢量<i class="jy-icon-arrow"></i>
				</el-button>
        <template #dropdown>
          <el-dropdown-menu class="clear-ed plugins-comp-list" style="width: 610px;">
            <li class="comp-list-box" v-for="(item, index) in groupComponentLists" :key="index">
              <span class="comp-title" v-html="item.title"></span>
              <el-row class="comps-list">
                <el-dropdown-item
                  v-for="(btnItem, btnIndex) in item.lists"
                  :key="btnIndex"
                  :disabled="btnItem.bIsDisabled"
                  :command="btnItem.cid">
                  <el-button
                    type="text"
                    :disabled="btnItem.bIsDisabled">
										<el-icon><i :class="btnItem.icon"></i></el-icon>
                    {{btnItem.text}}
                  </el-button>
                </el-dropdown-item>
              </el-row>
            </li>
          </el-dropdown-menu>
        </template>
			</el-dropdown>
		</el-col>
	</el-row>
</template>

<script>
	import { mapActions, mapGetters, mapState } from 'vuex'
	import { reactive } from 'vue'
	import { ComponentTypes } from "@/store/default-styles"
	import { TextInputStyles, PluginsFormLists, PluginsCompLists, GroupComponentLists }from "@/store/top-data"
	import MediaLayout from './MediaLayout.vue'
	import { MEDIAS, COMPONENT_TYPES, PAGE_TYPE } from '@/common/const'
  import { MOBILE_WID_HEI } from '@/common/const-dif'
	export default {
		name: "top",
		setup () {
      const state =  reactive({
        tabPosition: "",
        mediaItem: MEDIAS.image
      })
      const state_ = {
        fontSizes: TextInputStyles,
        pluginsFormLists: PluginsFormLists,
        MEDIAS: MEDIAS,
      }
      _.merge(state, state_)
      return state
		},
		created(){
			this.tabPosition = MEDIAS.image.type;
			this.mediaItem = MEDIAS.image
			// _.forEach(MEDIAS, (item, key) => {
			// 	this.getMediaData({ page: 1, pageSize: 20, type: item.type})
			// })
      let mediaData_ = this.mediaData
      if(!mediaData_ || !mediaData_.page) {
        this.getMediaData({ page: 1, pageSize: 20, type: this.mediaItem.type})
      }
		},
		computed: {
			...mapState({
				componentData: state => state.components.currentComponentData,
				mediaAllData: state => state.user.mediaAllData,
				siteAttr: state => state.components.attrs,
			}),
			pluginsCompLists() {
				return this.getMenuByLevel(PluginsCompLists)
			},
			groupComponentLists() {
				return this.getMenuByLevel(GroupComponentLists)
			},
      mediaData(){
        return this.mediaAllData[this.mediaItem.type]
      },
		},
		components: {
			MediaLayout
		},
		methods: {
			...mapActions({
				addComponent: 'components/addComponent',
				getWbComponentData: 'wbComponents/getWbComponentData',
				getMediaData: "user/getMediaData",
			}),
			...mapGetters('components', {
				getComponentDataByCid: 'getComponentDataByCid',
			}),
			getMenuByLevel(list){
				let tempArr = []
				_.forEach(list, (item, index) => {
					tempArr[index] = {}
					tempArr[index].title = item.title
					tempArr[index].lists = []
					_.forEach(item.lists, (item_) => {
						if(item_.isProduction || process.env.NODE_ENV !== 'production'){
							tempArr[index].lists.push(item_)
						}
					})
				})
				return tempArr
			},
			onAddTextInput(index) {
				let fontData = this.fontSizes[index];
				let fontSize = fontData.fontSize.split("px")[0];
				let width = (fontData.text.length + 2) * fontSize*MOBILE_WID_HEI.designScale + 20;
				let height = 1.5 * fontSize*MOBILE_WID_HEI.designScale;
				let data = {cid: fontData.cid, commonAttr:{text: fontData.text, fontSize}, conAttr: { width, height}};

				this.addComponent(data);
			},
			onChangeMedia(mediaType){
				if(mediaType == MEDIAS.image.type){
					this.mediaItem = MEDIAS.image
				}else if(mediaType == MEDIAS.video.type){
					this.mediaItem = MEDIAS.video
				}else if(mediaType == MEDIAS.audio.type){
					this.mediaItem = MEDIAS.audio
				}
				if(!this.mediaAllData[this.mediaItem.type]){
					this.getMediaData({ page: 1, pageSize: 20, type: this.mediaItem.type})
				}
			},
			onAddWBComponent(cid){
				let componentData = {cid}
				let width = 0;
				let height = 0;
				if(componentData.cid == COMPONENT_TYPES.wb_videos || componentData.cid == COMPONENT_TYPES.wb_imgs){
					width = MOBILE_WID_HEI.width;
					height = parseInt(width/16 * 9);
					componentData = {cid, conAttr: {width, height}};
				}
				this.addComponent(componentData);
			},
			onAddComponent(item) {
				if(item.cid == COMPONENT_TYPES.contacts){
					_.forEach(ComponentTypes[item.cid].components, (item_) => {
						this.addComponent(item_);
					});
				}else{
					this.addComponent(item);
				}
			},
			onAddGroupComponent(cid){
				let componentData = {cid}
				// let width = 0;
				// let height = 0;
				if(componentData.cid == COMPONENT_TYPES.wb_drag){
					if(this.siteAttr.pageType == PAGE_TYPE.long){
						this.showAlert('这个拖拽组件不能放置在长页中')
						return
					}
				}
				this.addComponent(componentData);
			},
			showAlert(content) {
				this.$dialog.alert({
					title: '',
					message: content,
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.plugins-nav-list{
		li.el-dropdown-menu__item{
			line-height: initial !important;
			padding: 5px 20px !important;
		}
	}

	.top {
		position: absolute;
		height: 60px;
		top: 0;
		left: 46.5%;
		transform: translateX(-50%);
		z-index: 10;
		display: flex;
		align-items: center;

		.plugins-nav {
			margin-right: 6px;
			&:last-child {
				margin-right: 0;

				.plugins-nav-btn{
					border-right: none;
				}
			}
		}
		.plugins-nav-btn {
			padding: 4px 6px 4px 6px;

			color: #fff;
			border-right: 1px solid #fff;
			border-radius: 0;
		}
		.plugins-nav-btn [class*="el-icon-"]+span {
			margin-left: 0 !important;
		}
	}

	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 34px;
		padding-left: 6px;
		// text-align: center;

		background: #127BFF;
		border-radius: 3px;
	}

	.right {
		text-align: right;
	}
	.plugins-comp-list{
		list-style: none;

		li.comp-list-box{
			list-style: none;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			border-bottom: 1px solid #EDEFF2;

			.comp-title{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 99px;

				background: #F3F5FA;
				font-size: 12px;
				color: #43475C;

				p{
					margin-top: 10px;
					line-height: 1.3;
				}
			}
			.comps-list{
				flex: 1;
				width: 100%;
				min-width: 0;
				padding: 10px 0;
				margin-left: 20px;
				display: flex;
				flex-wrap: wrap;

				li{
					padding: 0;
					margin: 0;
					width: 24.5%;
				}
				li:active, :hover, :focus{
					background-color: inherit;
					color: inherit;
				}

				button{
					// width: 25%;
					text-align: left;
					margin: 0;
					padding: 10px;

					font-size: 14px;
					color: #43475C;
				}
				button:hover{
					color: #66b1ff;
				}
				button:active, :focus{
					color: #66b1ff;
					background-color: #ecf5ff;
				}
				button:disabled,
				button[disabled]{
					color: #c0c4cc;
				}
			}
		}
		li:nth-last-child(2) {
			border-bottom: none;
		}
	}

	.plugins-media-list{
		padding: 10px 16px;
    min-height: 200px;
		li {
			width: 623px;
			word-break: break-all;
			word-wrap: wrap;
			border-top: 1px solid #EDEFF2;
			padding-top: 12px;
		}
	}
</style>
